import { theme } from '@/constants/theme'
import { hp } from '@/helpers/common'
import { getUserImageUrl } from '@/services/imageServie'
import { Image } from 'expo-image'
import React from 'react'
import { StyleSheet, View } from 'react-native'

const Avatar = ({ uri, size = hp(4.5), rounded = theme.radius.md, style = {} }) => {
  return (
    <View>
      <Image
        source={getUserImageUrl(uri)}
        transition={1000}
        style={[styles.avatar, { height: size, width: size, borderRadius: rounded }, style]}
      />
    </View>
  )
}

export default Avatar

const styles = StyleSheet.create({
  avatar: {
    borderCurve: 'continuous',
    borderColor: theme.colors.darkLight,
    borderWidth: 1,
  },
})
